﻿<style type="text/css">
    #container ul
    {
        list-style: none;
    }
    #container .buttons
    {
        margin-bottom: 20px;
    }
    
    #container .list li
    {
        width: 100%;
        border-bottom: 1px dotted #CCC;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    
    #container .grid li
    {
        float: left;
        width: 20%;
        height: 60px;
        border-right: 1px dotted #CCC;
        border-bottom: 1px dotted #CCC;
        padding: 20px;
    }
</style>
<script id="bookTemplate" type="text/x-jquery-tmpl">
<li>
    <img src="${CoverUrl}" width="60"></img>
</li>
</script>
<script type="text/javascript">

    $(document).ready(function () {

        $('#btnMoreBooks').button();

          $('#btnMoreBooks').click(function () {
            $("#dialog:ui-dialog").dialog("destroy");
            $("#dialog-modal").dialog({
                height: 600,
                width: 800,
                modal: true,
                buttons: {
                    Close: function () { $(this).dialog("close"); },                   
                }
            });
        });

        /// <summary>Get Top 3 Book</summary>
        $.ajax({
            url: "/home/gettop3books",
            type: "GET",
            success: function (result) {
                fillTopBooks(result);
            }
        });
    });


    function fillTopBooks(books) {
        $('#booksContainer').html('');
        $("#bookTemplate").tmpl(books).appendTo("#booksContainer");
    }

</script>
<div class="section">
    <div class="section-header">
        Books
    </div>
    <div style="">
        <div id="container">
            <ul id="booksContainer" class="grid">
            </ul>
        </div>
        <input style="position:relative; top:180px; left:10px;" type="button" id="btnMoreBooks" value="more..." />
    </div>
</div>

<div id="dialog-modal" title="Books list" style="display: none;">
    <p>
        Detailed list of books.</p>
    <div id="container">
        <ul class="grid">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
        </ul>
    </div>
</div>
